<template>
	<div class="container" align="center">
    <!--查询条件-->
		<el-form v-show="showSearch" ref="queryForm" :model="query" :inline="true" label-width="68px">
			<el-form-item label="户型名称" prop="configName">
				<el-input
          v-model="query.houseName"
          placeholder="请输入参数名称"
          clearable
          size="small"
          style="width: 240px"
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
    <!--工具条-->
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
					@click="handleUpdate">修改
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
					@click="handleDelete">删除
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
			</el-col>

		</el-row>
    <!--表格-->
		<el-table v-loading="loading" :data="huxingtuList" stripe @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号"  align="center" prop="id"/>
      <el-table-column label="户型名称" align="center" prop="houseName">
        <template slot-scope="scope">
          {{scope.row.houseName + scope.row.houseSizeId}}
        </template>
      </el-table-column>
      <el-table-column label="户型图片" align="center" prop="houseImage">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.houseImage"
            fit="fill"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="户型价格" align="center" prop="housePrice">
        <template slot-scope="scope">
          {{scope.row.housePrice + scope.row.priceUnit}}
        </template>
      </el-table-column>
      <el-table-column label="面积类型" align="center" prop="areaType" />
      <el-table-column label="房屋朝向" align="center" prop="houseOrientation" />
      <el-table-column label="销售状态" align="center" prop="houseStatusId">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.houseStatusId === '1' ? 'success' : 'danger'"
            disable-transitions>{{scope.row.statusName}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="户型分布" align="center" prop="houseDistribution" />
      <el-table-column label="物业类型" align="center" prop="houseProperty" />
      <el-table-column label="户型结构" align="center" prop="houseStructure" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
					</el-button>
					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 画分页条 -->
		<div v-show="total>0" class="pagination-container">
			<el-pagination
        :current-page="query.page"
        :page-sizes="[10, 20, 30, 50,100]"
				layout="total, sizes, prev, pager, next, jumper"
        :page-size="query.size"
        :total="total"
				@size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
		</div>
    <!--新增或修改对话框-->
		<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
			<el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="80px" >
        <el-form-item label="新房名称" prop="houseId">
          <el-input disabled style="width: 494.8px" v-model="form.houseId" :placeholder="houseName" />
        </el-form-item>
				<el-form-item label="户型名称" prop="houseName">
					<el-input style="width: 202.96px" v-model="form.houseName" placeholder="请输入户型名称" />
				</el-form-item>
				<el-form-item label="户型编号" prop="houseSizeId">
					<el-input style="width: 202.96px" v-model="form.houseSizeId" placeholder="请输入户型编号" />
				</el-form-item>
				<el-form-item label="户型图片" prop="houseImage">
					<el-input style="width: 202.96px" v-model="form.houseImage" placeholder="改进" />
				</el-form-item>
				<el-form-item label="面积类型" prop="houseAreaType">
          <el-select v-model="form.houseAreaType" placeholder="请选择">
            <el-option
              v-for="item in areaTypeOptions"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="面积单位" prop="houseArea">
          <el-select v-model="form.houseArea" placeholder="请选择">
            <el-option
              v-for="item in areaUnitOptions"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="户型价格" prop="housePrice">
          <el-input style="width: 202.96px" v-model="form.housePrice" placeholder="请输入户型价格" />
        </el-form-item>
        <el-form-item label="价格单位" prop="housePriceUnit">
          <el-select v-model="form.housePriceUnit" placeholder="请选择">
            <el-option
              v-for="item in priceUnitOptions"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="销售状态" prop="houseStatusId">
          <el-select v-model="form.houseStatusId" placeholder="请选择">
            <el-option
              v-for="item in sellStatusOptions"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="特色价值" prop="houseFeature">
          <el-input style="width: 202.96px" v-model="form.houseFeature" placeholder="请输入特色价值" />
        </el-form-item>
        <el-form-item label="物业类型" prop="propertyType">
          <el-select v-model="form.propertyType" placeholder="请选择">
            <el-option
              v-for="item in housePropertyOptions"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房子朝向" prop="orientationId">
          <el-select v-model="form.orientationId" placeholder="请选择">
            <el-option
              v-for="item in houseOrientationOptions"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="户型结构" prop="structureId">
          <el-select v-model="form.structureId" placeholder="请选择">
            <el-option
              v-for="item in houseStructureOptions"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="户型分布" prop="houseDistribution">
          <el-input style="width: 202.96px" v-model="form.houseDistribution" placeholder="请输入户型分布" />
        </el-form-item>
        <el-form-item label="空间信息" prop="spatialInfo">
          <el-input style="width: 202.96px" v-model="form.spatialInfo" placeholder="请输入空间信息" />
        </el-form-item>
        <el-form-item label="优势" prop="advantage">
          <el-input style="width: 202.96px" v-model="form.advantage" placeholder="请输入优势的地方" />
        </el-form-item>
        <el-form-item label="不足" prop="insufficient">
          <el-input style="width: 202.96px" v-model="form.insufficient" placeholder="请输入不足的地方" />
        </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getData, addHuxingtu, delHuxingtu, updateHuxingtu, getHuxingtuDetail } from '@/api/huxingtu.js'
import { typeSelect } from '@/api/data'

export default {
  name: 'Huxingtu',
  data() {
    return {
      loading: true,
      dateRange: [],
      huxingtuList: [],
      total: 0,
      form: {},
      title: '',
      open: false,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      // 下拉选择
      areaTypeOptions: [],
      priceUnitOptions: [],
      areaUnitOptions: [],
      housePropertyOptions: [],
      houseOrientationOptions: [],
      houseStructureOptions: [],
      sellStatusOptions: [],
      houseName: '蓝光公园华府',
      query: {
        page: 1,
        size: 10,
        houseName: undefined
      },
      rules: {
        houseSizeId: [{
          required: true,
          message: '户型编号不能为空',
          trigger: 'blur'
        }],
        houseImage: [{
          required: true,
          message: '必须选择户型图片',
          trigger: 'blur'
        }],
        housePrice: [{
          required: true,
          message: '户型价格不能为空',
          trigger: 'blur'
        }],
        propertyType: [{
          required: true,
          message: '物业类型不能为空',
          trigger: 'blur'
        }],
        orientationId: [{
          required: true,
          message: '房子朝向不能为空',
          trigger: 'blur'
        }],
        structureId: [{
          required: true,
          message: '户型结构不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this.getList()
    typeSelect('area_type').then(resp => {
      this.areaTypeOptions = resp.data
    })
    typeSelect('area_unit').then(resp => {
      this.areaUnitOptions = resp.data
    })
    typeSelect('price_unit').then(resp => {
      this.priceUnitOptions = resp.data
    })
    typeSelect('house_property').then(resp => {
      this.housePropertyOptions = resp.data
    })
    typeSelect('house_orientation').then(resp => {
      this.houseOrientationOptions = resp.data
    })
    typeSelect('house_structure').then(resp => {
      this.houseStructureOptions = resp.data
    })
    typeSelect('sell_status').then(resp => {
      this.sellStatusOptions = resp.data
    })
  },
  methods: {
    // 新增按钮
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加户型图'
    },
    // 获取数据显示在表格中
    getList() {
      this.loading = true
      getData(this.query).then(response => {
        this.huxingtuList = response.data
        this.total = response.count
        this.loading = false
      })
    },
    // 取消
    cancel() {
      this.open = false
      this.reset()
    },
    // 点击条件查询
    handleQuery() {
      this.query.page = 1
      this.getList()
    },
    // 重置查询条件
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 重置
    reset() {
      this.form = {
        houseName: undefined,
        houseImage: undefined,
        houseSizeId: undefined,
        houseAreaType: undefined,
        houseArea: undefined,
        housePrice: undefined,
        housePriceUnit: undefined,
        houseStatusId: undefined,
        houseFeature: undefined,
        propertyType: undefined,
        orientationId: undefined,
        structureId: undefined,
        houseDistribution: undefined,
        spatialInfo: undefined,
        advantage: undefined,
        insufficient: undefined
      }
      this.resetForm('')
    },
    // 选择
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 当每页显示多少发生变化
    handleSizeChange(val) {
      this.query.size = val
      // 查询数据
      console.log(this.query)
      this.getList()
    },
    // 点击了第几页
    handleCurrentChange(val) {
      this.query.page = val
      // 查询数据
      console.log(this.query)
      this.getList()
    },
    // 修改
    handleUpdate(row) {
      this.reset()
      const huxingtuId = row.id || this.ids
      getHuxingtuDetail(huxingtuId).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改户型图'
      })
    },
    // 删除
    handleDelete(row) {
      const huxingtuId = row.id || this.ids
      console.log(huxingtuId)
      this.$modal.confirm('是否确认删除参数编号为"' + huxingtuId + '"的数据项？').then(function() {
        return delHuxingtu(huxingtuId)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {})
    },
    // 导出
    handleExport() {
      this.download('huxingtu/export', {
        ...this.query
      }, `config_${new Date().getTime()}.xlsx`)
    },
    // 提交
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id !== undefined) {
            updateHuxingtu(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            // 需要新房传递过来的house_id
            this.form.houseId = 1
            addHuxingtu(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    }
  }
}
</script>

<style>
</style>
